app-menu: Simplify startup animation

During application startup, we used to display a rotating spinner
which also moved from left to right, revealing the application title.
The result looks rather busy, so remove the horizontal movement.

https://bugzilla.gnome.org/show_bug.cgi?id=640782

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 7d9f0110f28bb73a985eea1b3453689ae2d877cf..1335e840507ee9afc216eac22747f02242ca6ebf 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -34,13 +34,6 @@ stage {
     color: rgba(0,0,0,0.5);
 }
 
-.label-real-shadow {
-    background-gradient-direction: horizontal;
-    background-gradient-start: rgba(0, 0, 0, 0);
-    background-gradient-end: rgba(0, 0, 0, 255);
-    width: 10px;
-}
-
 StScrollBar
 {
   padding: 0px;

diff --git a/js/ui/panel.js b/js/ui/panel.js
index c08c3e8344e8cdbacf66dd46b1dd6d047b68a352..79376199c9146bffcfc33f8d696bf325391c6671 100644 (file)
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -33,8 +33,7 @@ const HOT_CORNER_ACTIVATION_TIMEOUT = 0.5;
 const BUTTON_DND_ACTIVATION_TIMEOUT = 250;
 
 const ANIMATED_ICON_UPDATE_TIMEOUT = 100;
-const SPINNER_UPDATE_TIMEOUT = 130;
-const SPINNER_SPEED = 0.02;
+const SPINNER_ANIMATION_TIME = 0.2;
 
 const STANDARD_TRAY_ICON_ORDER = ['a11y', 'display', 'keyboard', 'volume', 'bluetooth', 'network', 'battery'];
 const STANDARD_TRAY_ICON_SHELL_IMPLEMENTATION = {
@@ -275,20 +274,13 @@ AppMenuButton.prototype = {
             this.hide();
         }));
 
-        this._updateId = 0;
-        this._animationStep = 0;
-        this._clipWidth = PANEL_ICON_SIZE;
-        this._direction = SPINNER_SPEED;
+        this._stop = true;
 
         this._spinner = new AnimatedIcon('process-working.svg',
                                          PANEL_ICON_SIZE);
         this._container.add_actor(this._spinner.actor);
         this._spinner.actor.lower_bottom();
 
-        this._shadow = new St.Bin({ style_class: 'label-real-shadow' });
-        this._shadow.hide();
-        this._container.add_actor(this._shadow);
-
         let tracker = Shell.WindowTracker.get_default();
         tracker.connect('notify::focus-app', Lang.bind(this, this._sync));
         tracker.connect('app-state-changed', Lang.bind(this, this._onAppStateChanged));
@@ -338,62 +330,26 @@ AppMenuButton.prototype = {
             this._iconBox.remove_clip();
     },
 
-    _stopAnimation: function(animate) {
-        this._label.actor.remove_clip();
-        if (this._updateId) {
-            this._shadow.hide();
-            if (animate) {
-                Tweener.addTween(this._spinner.actor,
-                                 { opacity: 0,
-                                   time: 0.2,
-                                   transition: "easeOutQuad",
-                                   onCompleteScope: this,
-                                   onComplete: function() {
-                                       this._spinner.actor.opacity = 255;
-                                       this._spinner.actor.hide();
-                                   }
-                                 });
-            }
-            Mainloop.source_remove(this._updateId);
-            this._updateId = 0;
-        }
-        if (!animate)
-            this._spinner.actor.hide();
-    },
-
     stopAnimation: function() {
-        this._direction = SPINNER_SPEED * 3;
-        this._stop = true;
-    },
+        if (this._stop)
+            return;
 
-    _update: function() {
-        this._animationStep += this._direction;
-        if (this._animationStep > 1 && this._stop) {
-            this._animationStep = 1;
-            this._stopAnimation(true);
-            return false;
-        }
-        if (this._animationStep > 1)
-            this._animationStep = 1;
-        this._clipWidth = this._label.actor.width - (this._label.actor.width - PANEL_ICON_SIZE) * (1 - this._animationStep);
-        if (this.actor.get_direction() == St.TextDirection.LTR) {
-            this._label.actor.set_clip(0, 0, this._clipWidth + this._shadow.width, this.actor.height);
-        } else {
-            this._label.actor.set_clip(this._label.actor.width - this._clipWidth, 0, this._clipWidth, this.actor.height);
-        }
-        this._container.queue_relayout();
-        return true;
+        this._stop = true;
+        Tweener.addTween(this._spinner.actor,
+                         { opacity: 0,
+                           time: SPINNER_ANIMATION_TIME,
+                           transition: "easeOutQuad",
+                           onCompleteScope: this,
+                           onComplete: function() {
+                               this._spinner.actor.opacity = 255;
+                               this._spinner.actor.hide();
+                           }
+                         });
     },
 
     startAnimation: function() {
-        this._direction = SPINNER_SPEED;
-        this._stopAnimation(false);
-        this._animationStep = 0;
-        this._update();
         this._stop = false;
-        this._updateId = Mainloop.timeout_add(SPINNER_UPDATE_TIMEOUT, Lang.bind(this, this._update));
         this._spinner.actor.show();
-        this._shadow.show();
     },
 
     _getContentPreferredWidth: function(actor, forHeight, alloc) {
@@ -455,18 +411,13 @@ AppMenuButton.prototype = {
         this._label.actor.allocate(childBox, flags);
 
         if (direction == St.TextDirection.LTR) {
-            childBox.x1 = Math.floor(iconWidth / 2) + this._clipWidth + this._shadow.width;
+            childBox.x1 = Math.floor(iconWidth / 2) + this._label.actor.width;
             childBox.x2 = childBox.x1 + this._spinner.actor.width;
             childBox.y1 = box.y1;
             childBox.y2 = box.y2 - 1;
             this._spinner.actor.allocate(childBox, flags);
-            childBox.x1 = Math.floor(iconWidth / 2) + this._clipWidth + 2;
-            childBox.x2 = childBox.x1 + this._shadow.width;
-            childBox.y1 = box.y1;
-            childBox.y2 = box.y2 - 1;
-            this._shadow.allocate(childBox, flags);
         } else {
-            childBox.x1 = this._label.actor.width - this._clipWidth - this._spinner.actor.width;
+            childBox.x1 = -this._spinner.actor.width;
             childBox.x2 = childBox.x1 + this._spinner.actor.width;
             childBox.y1 = box.y1;
             childBox.y2 = box.y2 - 1;
@@ -545,7 +496,6 @@ AppMenuButton.prototype = {
                 this.stopAnimation();
             return;
         }
-        this._stopAnimation();
 
         if (this._iconBox.child != null)
             this._iconBox.child.destroy();